<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>班级圈</title>
<meta name="description" content="">
<meta content="yes" name="apple-mobile-web-app-capable" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" href="${s.base}/phone/css/common.css">
<link rel="stylesheet" href="${s.base}/phone/css/font-awesome.css">

	<style type="text/css">
		.famous-upload-pic{display:block; text-align: left; position: relative; margin-bottom: 14px;}
		.famous-upload-pic .upload-avatar{display: block; width: 105px; height: 105px; margin-top: 14px;}
		.famous-upload-pic .upload{width: 105px; height: 105px; opacity: 0; position: absolute; top: 0;}
		.famous-upload-pic .desc{font-size: 1.2rem; color: #666;}
	</style>
	<script src="${s.base}/js/jquery-3.2.0.min.js"></script>
	<script type="text/javascript" src="${s.base}/js/ajaxfileupload.js"></script>
	<script type="application/javascript">
        $(function(){
            $("#changeBtn").bind("click",function(){
                $("#showContent").hide();
                $("#showSelect").show();
            });
            $("#saveBtn").bind("click",function(){
                var classId=$("#classId").val();
                var classIds=$("#classIds").val();
                var content=$("#content").val();
                var id=$("#id").val();
                var personType=$("#personType").val();
                var pictures="";
                if(classIds == "" || classIds==null){
                    offset("auto","请选择班级！","温馨提示","确定");
                    return false;
                }
                if(content == "" || content==null){
                    offset("auto","请输入发布内容！","温馨提示","确定");
                    return false;
                }
                $("#showPic img").each(function (index,obj) {
					if(pictures==null || pictures==""){
                        pictures=$(obj).attr("src");
					}else{
                        pictures=pictures+"&"+$(obj).attr("src");
					}
                })
                var url="${s.base}/mobile/classCircleAdd";
                var params = {
                    pictures: pictures,
                    personType: personType,
                    id: id,
                    content: content,
                    classIds: classIds
                };
                //调用了jquery.json 库
				/* var encoded = $.toJSON( request );
				 var jsonStr = encoded;*/
                $.ajax({
                    url : url,
                    type : 'POST',
                    data : params,
                    dataType : 'json',
                    //contentType : 'application/json',
                    success : function(data, status, xhr) {
                        if(1==data.returnInfo.state){
                            layer.open({
                                type: 1
                                ,title: "温馨提示"
                                ,offset: "auto" //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
                                ,id: 'LAY_demoauto' //防止重复弹出
                                ,content: '<div style="padding: 20px 100px;">提交成功</div>'
                                ,btn: "确定"
                                ,btnAlign: 'c' //按钮居中
                                ,shade: 0 //不显示遮罩
                                ,yes: function(){
                                    location.href="/mobile/classCircle/"+classId+"?&personType="+personType+"&id="+id;
                                }
                            });

                        }else{
                            offset("auto",data.returnInfo.errorMsg,"温馨提示","确定");
                        }

                    },
                    Error : function(xhr, error, exception) {
                        // handle the error.
                        offset("auto",exception.toString(),"温馨提示","确定");
                    }
                });
            });
            $("#submitBtn").bind("click",function(){
                var classId=null;
                var className=null;
                $("#showSelect input:checkbox").each(function (index,obj) {
                    if($(obj).is(':checked')) {
                        if(className==null){
                            className=$(obj).attr("data-className");
						}else{
                            className=className+","+$(obj).attr("data-className");
						}
                        if(classId==null){
                            classId=$(obj).attr("data-classId");
                        }else{
                            classId=classId+","+$(obj).attr("data-classId");
                        }
                    }
                });
                $("#showName").html(className);
                $("#classIds").val(classId);
                $("#showSelect").hide();
                $("#showContent").show();
            });
        })
	</script>
</head>
<body>
<span id="showContent">
	<input type="hidden" id="classIds" value="" />
	<input type="hidden" id="personType" value="${personType}" />
	<input type="hidden" id="id" value="${id}" />
	<input type="hidden" id="classId" value="${msgClass.classId}" />
<div class="EditorContent">
	<div class="choose" id="changeBtn">选择对象:<span id="showName"></span><i class="fa fa-angle-right"></i></div>
	<div class="Editor">
		<textarea rows="5" id="content" placeholder="请输入你需要发送的内容"></textarea>
		<div class="add-img">
			<div id="showPic" class="img-con"></div>
			<span><input type="file" style="opacity:0;" capture="camera" accept="image/*"  name="myfiles" class="upload" id="myFile" onchange="ajaxFileUploads()"></span>
		</div>
	</div>
	<div class="button-group">
		<input type="button" id="saveBtn" class="Editor-button" value="提交" />
	</div>
</div>
</span>
<div id="showSelect" style="width:100%; height:100%; background-color:#FFF; display: none;">
    <div class="Seach-content">
        <ul>
			<li>
				<#if personType == "1">
			<li><input type="checkbox"  class="selectUnCheck" data-classId="${msgStudent.classId}" data-className="${msgStudent.className}" /><a href="javascript:void(0)">${msgStudent.gradeName}${msgStudent.className}</a></li>
			</#if>
            <#if personType == "2">
                <#list msgTeacherClassList as msgTeacherClass>
                    <li><input type="checkbox"  class="selectUnCheck" data-classId="${msgTeacherClass.classId}" data-className="${msgTeacherClass.className}" /><a href="javascript:void(0)">${msgTeacherClass.gradeName}${msgTeacherClass.className}</a></li>
                </#list>
            </#if>
            <#if personType == "3">
                <#list msgParentList as msgParents>
                    <li><input type="checkbox"  class="selectUnCheck" data-classId="${msgParents.classId}" data-className="${msgParents.className}" /> <a href="javascript:void(0)">${msgParents.gradeName}${msgParents.className}</a></li>
                </#list>
            </#if>
			</li>
        </ul>
    </div>
	<div class="Seach-bottom">
		<div class="Seach-b-con">

			<input type="button" id="submitBtn" class="Editor-button" value="确认选择" />
		</div>
	</div>
</div>

<script  type="application/javascript" src="${s.base}/js/layer/layer.js" ></script>
<script  type="application/javascript" src="${s.base}/js/layer/commont.js" ></script>
<script type="text/javascript">
    function ajaxFileUploads(){
        //开始上传文件时显示一个图片,文件上传完成将图片隐藏
        //$("#loading").ajaxStart(function(){$(this).show();}).ajaxComplete(function(){$(this).hide();});
        //执行上传文件操作的函数
        $.ajaxFileUpload({
            //处理文件上传操作的服务器端地址(可以传参数,已亲测可用)
            url:'/file/fileUploadCompress?uname=123',
            secureuri:false,                           //是否启用安全提交,默认为false
            fileElementId:'myFile',               //文件选择框的id属性
            dataType:'text',                           //服务器返回的格式,可以是json或xml等
            success:function(data, status){            //服务器响应成功时的处理函数
                data = data.replace(/<pre.*?>/g, '');  //ajaxFileUpload会对服务器响应回来的text内容加上<pre style="....">text</pre>前后缀
                data = data.replace(/<PRE.*?>/g, '');
                data = data.replace("<PRE>", '');
                data = data.replace("</PRE>", '');
                data = data.replace("<pre>", '');
                data = data.replace("</pre>", '');     //本例中设定上传文件完毕后,服务端会返回给前台[0`filepath]
                if(data.substring(0, 1) == 0){         //0表示上传成功(后跟上传后的文件路径),1表示失败(后跟失败描述)
					$("#showPic").append("<img src=\""+data.substring(2)+"\" />");
                }else{
                    $('#result').html('图片上传失败，请重试！！');
                }
            },
            error:function(data, status, e){ //服务器响应失败时的处理函数
                $('#result').html('图片上传失败，请重试！！');
            }
        });
    }
</script>
</body>
</html>
